import Vue from 'vue';
import Vuex from 'vuex';
//Vue.use(Vuex)

const store = () =>
  new Vuex.Store({
    state: () => ({
      showLoading: false,
    }),
    // 在getters中声明监听state值变化的函数，缓存计算后的数据，通过this.$store.getters调用
    getters: {
      // 接受state作为参数，每次showLoading发生变化时，都会被调用
      getState: state => {
        //console.log(state.showLoading)
        return state.showLoading;
      },
    },
    // 只能执行同步方法，不要去执行异步方法，通过this.$store.commit方法去调用
    mutations: {
      // 自定义改变state状态的方法，不建议直接通过this.$store.state.? = ?的方式改变state中的状态
      showloader: state => {
        Vue.set(state, 'showLoading', true);
      },
      // mutations的第一个参数即为state对象，并且可以向mutation传入额外的参数
      hideloader: (state, n) => {
        state.showLoading = false;
      },
    },
    // 借助actions的手去执行mutations，通过this.$store.dispatch的方式调用
    // 可以用来执行异步操作，可以跟踪异步数据状态变化
    actions: {
      showloader: context => {
        // 调用mutation
        context.commit('showloader');
      },
      hideloader: (context, n) => {
        context.commit('hideloader', n);
      },
      nuxtServerInit({ commit }, { req }) {
        commit('showloader');
      },
    },
  });

export default store;
